<script lang="ts" setup>
import { Icon } from "@vicons/utils";
import { StarRound, StarOutlineRound } from "@vicons/material";
import { Question, QuestionState } from "@/types/practice";
import { IconFont } from "@nutui/icons-vue";
import "@nutui/icons-vue/dist/style_iconfont.css";

const props = defineProps<{
  total: number;
  correctCount: number;
  wrongCount: number;
  questionIds: Question["id"][];
  questionsStateMap: Map<Question["id"], QuestionState>;
  currentIndex: number;
  showSubmit: boolean;
}>();

const emit = defineEmits<{
  (e: "onShowNumList"): void;
  (e: "submit"): void;
  (e: "updateCollectRecord", questionId: Question["id"], isCollect: boolean): void;
}>();

const isCollect = computed(() => {
  const id = props.questionIds[props.currentIndex];
  // 收藏的数据以store中的为准
  return props.questionsStateMap.get(id)?.isCollect || false;
});

const toggleCollectStatus = () => {
  emit("updateCollectRecord", props.questionIds[props.currentIndex], !isCollect.value);
};

const handleSubmit = (e: MouseEvent) => {
  e.preventDefault();
  e.stopPropagation();
  emit("submit");
};
</script>

<template>
  <div class="flex justify-around items-center">
    <!-- 正确数量 -->
    <div class="flex items-center gap-2">
      <IconFont name="success" size="20" class="c-emerald-5" />
      {{ correctCount }}
    </div>

    <!-- 错误数量 -->
    <div class="flex items-center gap-2">
      <IconFont name="failure" size="20" class="c-red-5" />
      {{ wrongCount }}
    </div>

    <!-- 当前进度 -->
    <div class="flex items-center gap-2" @click="emit('onShowNumList')">
      <IconFont name="issue" size="20" class="c-gray-5" />
      <div>
        {{ currentIndex + 1 }}<span class="c-gray-4">/{{ total }}</span>
      </div>
    </div>

    <!-- 收藏 -->
    <div class="flex items-center gap-1" @click="toggleCollectStatus">
      <Icon v-if="isCollect" class="text-3xl c-orange-5">
        <StarRound />
      </Icon>
      <Icon v-else class="text-3xl c-gray-5">
        <StarOutlineRound />
      </Icon>
      <span v-if="showSubmit" class="px-4 bg-emerald-4 c-white rd-full py-0.5" @click="handleSubmit">交卷</span>
      <span v-else>收藏</span>
    </div>
  </div>
</template>
